<script setup>
import { useRouter } from "vue-router";
import { useIndexStore } from "@/stores/indexStore";

const router = useRouter();
const props = defineProps({
  title: {
    type: String,
    default: "默认标题",
  },
  Send: {
    type: String,
    default: "",
  },
});
const back = () => {
    router.push("ItemBuyer");
};
</script>

<template>
 
 <!-- 顶部返回按钮 -->
 <div class="topBottom">
    <div class="title_button">
      <div class="forward" @click="back">
        <van-icon
          name="arrow-left"
          size="20"
          color="#777"
          :class="[useIndexStore().isRtl ? 'trun_180' : '']"
        />
      </div>
      <div class="title">
        {{ $t('me.order.hotelOrder') }}
      </div>
    </div>

    <!-- 自定义搜索插槽 -->
    <div class="search-slot">
      <slot name="search" />
    </div>

    <div @click="router.push('HotelList')" :class="{ back: Send }">
      {{ $t('shop.scheduledDetail.detail') }}
    </div>
  </div>
</template>
<style lang="scss" scoped>
.topBottom {
  position: fixed;

  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  box-sizing: border-box;
  background-color: #fff;
  padding-top: 10rem;

  display: flex;
  align-items: center;
  justify-content: space-between;

  .title_button {
    display: flex;
    align-items: center;

    .title {
      font-size: 20rem;
      line-height: 50rem;
    }

    .forward {
      width: 40rem;
      text-align: center;
      border-radius: 5rem;
    }
  }

  .back {
    font-size: 12rem;
    margin: 10rem 8rem 0;
    padding: 0 30rem;
    border-radius: 30rem;
    height: 30rem;
    line-height: 30rem;
    color: #642e8eff;
    border: 1rem solid #642e8eff;
  }

  .search-slot {
  flex: 1;
  margin-left: 20rem; /* 根据需要调整间距 */
  display: flex;
  align-items: center;
}

}
</style>
